<template>
	<view class="page" :style="{'height':(h-mt)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="反向寻车"></c-nav-bar>
		<image class="bg" src="https://i.ringzle.com/file/20231108/95e8e6f8fdee4067b821c6b5e56cba14.png"></image>
		<view class="content">
			<view class="c_box">
				<view class="title">请输入车牌号</view>
				<view class="licence">
					<car-number-input ref="carNumberInput" @numberInputResult="numberInputResult"></car-number-input>
				</view>
				<view class="my" @tap="showMyLicence">我的车牌</view>
			</view>
			<view class="history" v-if="histories.length>0">
				<view class="h_top">
					<view class="ht_l">
						<image src="https://i.ringzle.com/file/20231114/13ed65bf148c4b7680a0a1fc95b850fa.png"></image>
						<text>历史车牌号</text>
					</view>
					<image @tap="clearHistory" class="ht_r" src="https://i.ringzle.com/file/20231114/bda9f8ffc3954ae8afbbf9db49f82339.png"></image>
				</view>
				<view class="h_item" v-for="(item,index) in histories" :key="index" @tap="clickLicence(item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @tap="searchCar">查询</view>
		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 90,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				licence:'',
				histories:[]
			}
		},
		onShow() {
			this.histories = uni.getStorageSync('licenceHistory')?JSON.parse(uni.getStorageSync('licenceHistory')):[];
			if(uni.getStorageSync('numberplate')){
				this.licence = uni.getStorageSync('numberplate');
				const valList = uni.getStorageSync('numberplate').split("");
				const temp = ['','','','','','','',''];
				for (let i in valList) {
					temp[i] = valList[i]
				}
				this.$refs.carNumberInput.inputList = temp;
				uni.removeStorageSync('numberplate');
			}
		},
		methods: {
			numberInputResult(e) {
				this.licence = e;
			},
			clickLicence(item){
				this.licence = item;
				const valList = item.split("");
				const temp = ['','','','','','','',''];
				for (let i in valList) {
					temp[i] = valList[i]
				}
				this.$refs.carNumberInput.inputList = temp;
			},
			showMyLicence(){
				this.$login().then(res => {
					if (res === 0) {
						uni.navigateTo({
							url:'/pagesIndex/parkingService/licenceManage'
						})
					}else this.$refs['phoneNumber'].show = true;
				})
			},
			clearHistory(){
				uni.removeStorageSync('licenceHistory');
				this.histories = [];
			},
			searchCar(){
				if(!this.$reg.carNo(this.licence)) return this.$showToast('请输入正确的车牌');
				
				this.$api.get('/travel/wisdom/ReverseSearchcar/whole?numberplate='+this.licence).then(res=>{
					if(res.data.code===0){
						let lh = uni.getStorageSync('licenceHistory')?JSON.parse(uni.getStorageSync('licenceHistory')):[];
						if(!lh.find(l=>l==this.licence)){
							lh.push(this.licence);
							uni.setStorageSync('licenceHistory',JSON.stringify(lh))
						}
						uni.navigateTo({
							url:'/pagesIndex/parkingService/reverseSearchCarResult?object='+JSON.stringify({
								latitude: parseFloat(res.data.data.latitude),
								longitude: parseFloat(res.data.data.longitude),
								licence:res.data.data.numberplate,
								park:res.data.data.nameIsland+res.data.data.parkadeName,
								area:res.data.data.region,
								carNo:res.data.data.id+'号',
								price:res.data.data.estimatedCosts
							})
						})
						
					}else this.$showModal(res.data.msg)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/.car-input-box{
		width: calc(12.5% - 8rpx) !important;
		position: relative;
		&:nth-child(2){
			margin-right: 48rpx;
			&::after{
				content: '';
				width: 6rpx;
				height: 6rpx;
				background: #111111;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				margin-top: -3rpx;
				right: -26.5rpx;
			}
		}
	}
	/deep/.car-input-item{
		background: #FFFFFF;
		border: 2rpx solid #DCDFE5;
	}
	
	.page{
		background: #F5F8FA;
		position: relative;
		z-index: 0;
		overflow-y: auto;
		.bg{
			width: 100%;
			height: 567rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		
		.content{
			width: calc(100% - 48rpx);
			margin: 394rpx 24rpx 0;
			position: absolute;
			.c_box{
				border-radius: 20rpx;
				padding: 40rpx 24rpx 30rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				.title{
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid rgba(112, 112, 112, .1);
				}
				.licence {
					width: 100%;
					height: 78rpx;
					background: #fff;
					padding-top: 40rpx;
				}
				.my{
					margin-top: 40rpx;
					text-align: right;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #007A69;
					text-decoration: underline;
				}
			}
		
			.history{
				margin: 29rpx 24rpx 0;
				background: #F5F8FA;
				.h_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 22rpx;
					.ht_l{
						display: flex;
						align-items: center;
						image{
							width: 27rpx;
							height: 27rpx;
						}
						text{
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 14rpx;
						}
					}
					.ht_r{
						width: 30rpx;
						height: 28rpx;
					}
				}
				.h_item{
					margin-bottom: 22rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #707070;
				}
			}
		}
		.bottom{
			width: 100%;
			height: 180rpx;
			position: fixed;
			bottom: 0;
			z-index: 1;
			background: #fff;
			box-shadow: 0rpx -1rpx 4rpx rgba(0,0,0,0.06);
			.btn{
				width: calc(100% - 60rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 50rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin: 39rpx 30rpx 0;
			}
		}
	}
</style>